<template>
  <scroll
    ref="Result"
    pullUp
    @pullUp="handleLoadMore"
    :upLoading="isupLoading"
  >
    <div class="search-result">
      <ul>
        <li
          @click="selectItem(item)"
          class="search-result--item"
          v-for="item in resultList"
          :key="item.id"
        >
          <div class="icon">
            <i class="iconfont">&#xe604;</i>
          </div>
          <div class="name">
            <p class="text" v-html="getDisplayName(item)"></p>
          </div>
        </li>
      </ul>
      <loading v-show="loading" middle />
      <div v-show="!hasMore && !resultList.length && !loading" class="no-data">
        <no-data title="抱歉，暂无搜索结果!" />
      </div>
    </div>
  </scroll>
</template>

<script>
import Scroll from 'baseUI/Scroll'
import Loading from 'baseUI/Loading_2'
import NoData from 'baseUI/NoData'

import { search } from 'api/search'
import { ERR_OK } from 'api/config'
import { createSong, isValidMusic, processSongsUrl } from '@/model/song'
// import Singer from '@/model/singer'

const TYPE_SINGER = 'singer'
const pageSize = 20

export default {
  name: 'Reasult',
  components: {
    Scroll,
    Loading,
    NoData
  },
  props: {
    showSinger: {
      type: Boolean,
      default: true
    },
    query: { // 搜索条件
      type: String,
      default: ''
    }
  },
  data () {
    return {
      pageNum: 1,
      resultList: [],
      loading: true,
      hasMore: true, // 是否有更多数据
      isupLoading: false // 开启上拉加载动画
    }
  },
  created () {
    this.search(this.query)
  },
  methods: {
    _normalizeSongs (list) { // 格式化
      let ret = []
      list.forEach((musicData) => {
        if (isValidMusic(musicData)) {
          ret.push(createSong(musicData))
        }
      })
      return ret
    },
    _genResult (data) { // 获取结果
      let ret = []
      if (data.zhida && data.zhida.singerid && this.pageNum === 1) {
        ret.push({
          ...data.zhida,
          ...{ type: TYPE_SINGER }
        })
      }
      return processSongsUrl(this._normalizeSongs(data.song.list)).then((songs) => {
        ret = ret.concat(songs)
        return ret
      })
    },
    search () {
      search(this.query, this.pageNum, this.showSinger, pageSize).then((res) => {
        if (res.code === ERR_OK) {
          this._genResult(res.data).then((result) => {
            // console.log(res, '结果')
            this.resultList = result
            this.loading = false
          })
          this._checkMore(res.data)
        }
      })
    },
    getDisplayName (item) {
      if (item.type === TYPE_SINGER) {
        return item.singername
      } else {
        return `${item.name} - ${item.singer}`
      }
    },
    selectItem (item) { // 点击详情
      this.$emit('item', item)
    },
    _checkMore (data) {
      const song = data.song
      const totolSize = song.curnum + (song.curpage - 1) * pageSize
      console.log(totolSize, song.totalnum)
      if (!song.list.length || totolSize >= song.totalnum) {
        this.hasMore = false
      }
    },
    handleLoadMore () { // 加载更多
      if (!this.hasMore) {
        return
      }
      this.isupLoading = true
      this.pageNum++
      search(this.query, this.pageNum, this.showSinger, pageSize).then(async (res) => {
        if (res.code === ERR_OK) {
          await this._genResult(res.data).then((result) => {
            console.log('加载更多')
            this.isupLoading = false
            this.resultList = this.resultList.concat(result)
          })
          this._checkMore(res.data)
        }
      })
    }
  },
  watch: {
    query (newVal) {
      if (!newVal) { // 不为空搜索
        return
      }
      this.resultList = []
      this.search(newVal)
    }
  },
  beforeDestroyed () {
    this.hasMore = true
    this.resultList = []
    this.$refs.Result.refresh()
  }
}
</script>

<style scoped lang="less">
@import '~assets/style/variable';
@import '~assets/style/mixin';
.search-result {
  padding: 0 10px;
  &--item {
    display: flex;
    align-items: center;
    height: 38px;
    border-bottom: 1px solid @border-color;
  }
  .icon {
    flex: 0 0 25px;
    width: 25px;
    .iconfont {
      color: var(--text-color)
    }
  }
  .name {
    flex: 1;
    font-size: @fs-medium;
    color: var(--text-color);
    overflow: hidden;
    .text {
      .no-wrap();
    }
  }
  .no-data /deep/ {
    position: absolute;
    width: 100%;
    top: 50%;
    z-index: 99;
    transform: translateY(-50%);
  }
}
</style>
